<template>
  <div class="image-container">
    <img  @load="Load" :style="{transition:`opacity ${duration}ms`,opacity}" :src="src">
    <img v-if="!isEverything" :src="placeholder">
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    src: {
      type: String,
      required: true
    },
    placeholder: {
      type: String
    },
    duration: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      isOrigin: false, // 原图是否加载完成
      isEverything: false // 模糊图
    }
  },
  computed: {
    opacity () {
      return this.isOrigin ? 1 : 0
    }
  },
  methods: {
    Load (e) {
      this.isOrigin = true
      setTimeout(() => {
        this.isEverything = true
      }, this.duration)
      this.$emit('load')
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/mixin.less";
.image-container{
  width: 100%;
  height: 100%;
  position: relative;
  img{
    .self-fill();
    object-fit: cover;
  }
  .placeholder {
    filter: blur(2vw);
  }
}
</style>
